<template>
	<view class="out_view">
		<view class="left-top-sign">REGISTER</view>
		<view class="welcome">
			欢迎注册！
		</view>
		<view class="input-content">
			<view class="input-item">
				<text class="tit">手机号码</text>
				<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile"
					@input="inputChange" />
					<view class="err_tip">
						<span class="err_info">请输入正确手机号</span>
					</view>
<!-- 					<view class="err_tip" v-else></view> -->
			</view>
			<view class="input-item">
				<text class="tit">密码</text>
				<input type="password" value="" placeholder="8-18位不含特殊字符的数字、字母组合" placeholder-class="input-empty"
					maxlength="20" password data-key="password" @input="inputChange" @confirm="toLogin" />
					<view class="err_tip">
						<span class="err_info">请输入8-18位不含特殊字符的数字、字母组合</span>
					</view>
<!-- 					<view class="err_tip" v-else></view> -->
			</view>
			<view class="input-item">
				<text class="tit">验证码</text>
				<input type="number" value="" placeholder="验证码" placeholder-class="input-empty"
					maxlength="20" password data-key="password" @input="inputChange" @confirm="toLogin" />
				<button class="get_msg_code" onclick="">获取验证码</button>
				<view class="err_tip">
					<span class="err_info">请输入6位数字验证码</span>
				</view>
			</view>
		</view>
	</view>
	<view class="register-section"></view>
</template>

<script>
	import Json from "../../Json.js"
	import constents from "../../common/constents.js"
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.out_view {
		position: relative;
		z-index: 90;
		background: #fff;
		height:100%;
	}

	.left-top-sign {
		font-size: 120upx;
		color: #ebeae9;
		position: relative;
		left: -16upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #36343c;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}
    .input-content {
    	padding: 0 60upx;
		// margin-bottom: 100upx;
    }
    
    .input-item {
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
    	justify-content: center;
    	padding: 0 30upx;
    	border-radius: 4px;
    	margin-bottom: 50upx;
    	border: 1px;
    	background-color: #f8f6fc;
    
    	.tit {
    		height: 50upx;
    		line-height: 56upx;
    		font-size:11px;
    		color: #36343c;
    	}
    
    	input {
    		height: 60upx;
    		font-size: 13px;
    		color: #36343c;
    		width: 100%;
    	}
		.err_tip{
			min-width: 30px;
			height: 30px;
			line-height: 30px;
			color: #ff654c;
			font-size: 12px;
			display: flex;
			align-items: center;
			/* visibility: hidden; */
			
			.err_info {
				flex-shrink: 0;
			}
		}
		
    }
	.input-item:nth-of-type(3){
		width:180px;
		height: 60upx;
		margin-bottom: 50upx;
	}
	.get_msg_code {
		display: inline-block;
		box-sizing: border-box;
		border: 0;
		padding: 0 15px;
		width: 125px;
		height: 40px;
		line-height: 36px;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
		cursor: pointer;
		vertical-align: top;
		background-color: #3f9f5f;
	}
	.register-section {
		position: absolute;
		left: 0;
		width: 100%;
		font-size: 11px;
		color: #36343c;
		text-align: center;
		background-color:#fff ;
		height: 40%;
	}
</style>